import { Applet, System } from "@/api/interface/iot";
import { useApplet } from "@/hooks/useApplet";
import moment from "moment";
import { PropType } from "vue";

export default defineComponent({
	props: {
		serverDetail: {
			type: Object as PropType<System.ResServer>,
			default: () => {}
		},

		basicDetail: {
			type: Object as PropType<Applet.ResUserApplet>,
			default: () => {}
		}
	},
	emits: ["clickDetailMod"],
	setup(props, { emit }) {
		const { gotoAppletPage } = useApplet();
		return () => {
			return (
				<div class="p-6">
					<div class="p-6 shadow" style="border: 1px solid #eee;">
						<div style="line-height:24px">
							<div class="title-left-line"></div>
							<span>基础信息</span>
						</div>
						<div class="p-4 grid grid-cols-2 space-y-2">
							<div class="flex  mt-2">
								<div class="w-32">应用名称</div>
								<div class="flex-1">
									<el-link
										type="primary"
										underline={false}
										onClick={() => {
											emit("clickDetailMod");
										}}
									>
										{props.basicDetail.name || "--"}
									</el-link>
								</div>
							</div>
							<div class="flex">
								<div class="w-32">应用主页</div>
								<div class="flex-1">
									<el-link type="primary" underline={false} onClick={() => gotoAppletPage(props.basicDetail)}>
										{props.basicDetail.home || "--"}
									</el-link>
								</div>
							</div>
							<div class="flex ">
								<div class="w-32">创建时间</div>
								<div class="flex-1">
									{(props.basicDetail.createTime && moment(props.basicDetail.createTime).format("YYYY-MM-DD hh:mm:ss")) || "--"}
								</div>
							</div>
							<div class="flex ">
								<div class="w-32">修改时间</div>
								<div class="flex-1">
									{(props.basicDetail.updateTime && moment(props.basicDetail.updateTime).format("YYYY-MM-DD hh:mm:ss")) || "--"}
								</div>
							</div>
							<div class="flex col-span-2">
								<div class="w-32">描述</div>
								<div class="flex-1">{props.basicDetail.desc || "--"}</div>
							</div>
						</div>
					</div>

					<div class="p-6 shadow mt-6" style="border: 1px solid #eee;">
						<div style="line-height:24px">
							<div class="title-left-line"></div>
							<span>服务信息</span>
						</div>
						<div class="p-4 grid grid-cols-2 space-y-2">
							<div class="flex mt-2">
								<div class="w-32">服务类型</div>
								<div class="flex-1">
									{(props.serverDetail.svcType == "applet" && "普通应用") ||
										(props.serverDetail.svcType == "dockerapp" && "Docker应用") ||
										"--"}
								</div>
							</div>
							<div class="flex ">
								<div class=" w-32">服务名称</div>
								<div class="flex-1">{props.serverDetail.name || "--"}</div>
							</div>
							<div class="flex ">
								<div class=" w-32">服务标识</div>
								<div class="flex-1">{props.serverDetail.instanceId || "--"}</div>
							</div>
							<div class="flex ">
								<div class=" w-32">启动参数</div>
								<div class="flex-1">{props.serverDetail.arg || "--"}</div>
							</div>
							<div class="flex ">
								<div class=" w-32">网关</div>
								<div class="flex-1">{props.serverDetail.machine || "--"}</div>
							</div>
							{props.serverDetail.svcType == "dockerapp" ? (
								<div class="flex ">
									<div class=" w-32">镜像地址</div>
									<div class="flex-1">
										<el-link href={props.serverDetail.dockerapp} type="primary" underline={false}>
											{props.serverDetail.dockerapp || "--"}
										</el-link>
									</div>
								</div>
							) : null}

							<div class="flex col-span-2">
								<div class=" w-32">服务描述</div>
								<div class="flex-1">{props.serverDetail.remark || "--"}</div>
							</div>
						</div>
					</div>

					<div class="p-6 shadow mt-6" style="border: 1px solid #eee;">
						<div style="line-height:24px">
							<div class="title-left-line"></div>
							<span>文档信息</span>
						</div>
						<div class="p-4 grid grid-cols-1">
							<div class="flex ">
								<div class="w-32">应用文档</div>
								<div class="flex-1">
									<el-link href={props.basicDetail.doc} type="primary" underline={false} target="_blank">
										{props.basicDetail.doc || "--"}
									</el-link>
								</div>
							</div>
						</div>
					</div>
				</div>
			);
		};
	}
});
